<template>
  <div class="app-container">
    <el-form v-show="searchVisible" ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="容器号:">
        <el-input v-model="queryParams.contianBoxNo" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- @selection-change="handleSelectionChange" @row-click="handleRowClick"-->
    <el-table v-loading="loading" :data="page.records" highlight-current-row >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="上架序号" align="center" prop="seqNo" />
      <el-table-column label="容器号" align="center" prop="contianBoxNo" />
      <el-table-column label="操作人员" align="center" prop="jobUserName" />
      <el-table-column label="操作人员编号" align="center" prop="jobUserNo" width="180"/>
      <el-table-column label="要求出库时间" align="center" prop="requstRecptDate" width="150"/>
      <el-table-column label="数量" align="center" prop="qty" />
    </el-table>

    <!-- 分页 -->
    <pagination v-show="page.total>0" :total="page.total" :page.sync="page.current" :limit.sync="page.pageSize" @pagination="handleQuery" />

  </div>
</template>

<script>
import BaseInfoMixin from '@/mixins/BaseInfo'
import TWmsReciptIntoLocPlanApi from '@/api/web/TWmsReciptIntoLocPlanApi'

export default {
  name: 'tWmsReciptIntoLocPlanInfo',
  mixins: [BaseInfoMixin],
  props: {
    employeeManage: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  watch: {
    employeeManage() {
      this.handleQuery()
    }
  },
  data() {
    return {
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
        records: []
      },
      queryParams: {
        contianBoxNo: null,
        isValid: this.$constant.Y
      },
      searchVisible: true,
      loading: true
    }
  },
  created() {
    this.handleQuery()
    this.loadOptions()
  },
  methods: {
    loadOptions(){
    },
    handleQuery(){
      this.loading = true
      //console.log(this.employeeManage)

      TWmsReciptIntoLocPlanApi.page(this.queryParams,this.page).then(response => {
        this.page.records = response.data.records
        this.page.total = response.data.total
        this.loading = false
      })
    },
  }

}
</script>

<style lang="scss" scoped>
.b-cont {
  position: relative;
  padding: 0 50px 20px 20px;
}

.b-cells {
  margin-top: 25px;
}

.b-cell {
  padding: 0 10px;
  overflow: hidden;
  .b-cell-b {
    width: auto;
    padding: 8px;
    .b-cell-name {
      width: 110px;
      margin-right: 10px;
      font-size: 13px;
      flex-shrink: 0;
      color: #777;
    }
    .b-cell-name2 {
      width: 100%;
      margin-right: 10px;
      font-size: 13px;
      flex-shrink: 0;
      color: #777;
    }
    .b-cell-value {
      font-size: 13px;
      color: #333;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    .b-cell-foot {
      flex-shrink: 0;
      display: block;
      width: 15px;
      height: 15px;
      margin-left: 8px;
    }
  }
}

.f-item {
  padding: 3px 0;
  height: 25px;
  .f-img {
    position: block;
    width: 15px;
    height: 15px;
    padding: 0 1px;
    margin-right: 8px;
  }
  .f-name {
    color: #666;
    font-size: 12px;
    margin-right: 10px;
  }
}
</style>
